<template>
    <div slot="content" style="height:auto;width: 90%;margin-left: 30px;" v-loading="loading" element-loading-text="拼命加载中">
        <el-row class="warp">
            <el-col :span="24" class="warp-breadcrum">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/enterprise/enterprise_list/' }">金融机构信息</el-breadcrumb-item>
                    <el-breadcrumb-item>编辑金融机构信息</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>

            <el-form :model="bizForm" :rules="rules" ref="bizForm" label-width="140px">
                <el-col :span="24" class="warp-breadcrum">
                    <div class="tit-6">
                        基本信息
                    </div>
                </el-col>
                <el-col :span="24" class="warp-main">

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="金融机构名称" prop="enterpriseName">
                                <el-input size="medium" placeholder="请输入金融机构名称"
                                          v-model="bizForm.enterpriseName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="统一信用代码" prop="enterpriseIdNbr">
                                <el-input size="medium" placeholder="请输入统一社会信用代码"
                                          v-model="bizForm.enterpriseIdNbr"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="法人姓名" prop="ownerName">
                                <el-input size="medium" placeholder="请输入法人姓名" v-model="bizForm.ownerName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="法人身份证号" prop="ownerIdNbr">
                                <el-input size="medium" placeholder="请输入法人身份证号" v-model="bizForm.ownerIdNbr"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="法人手机号" prop="ownerTel">
                                <el-input size="medium" placeholder="请输入法人手机号" v-model="bizForm.ownerTel"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="授权代理人" prop="agentName">
                                <el-input size="medium" placeholder="请输入授权代理人姓名" v-model="bizForm.agentName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="代理人身份证号" prop="agentIdNbr">
                                <el-input size="medium" placeholder="请输入代理人身份证号"
                                          v-model="bizForm.agentIdNbr"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="代理人手机号" prop="agentTel">
                                <el-input size="medium" placeholder="请输入代理人手机号" v-model="bizForm.agentTel"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="机构类型" prop="enterpriseType">
                                <el-select v-model="bizForm.enterpriseType" placeholder="请选择">
                                    <el-option label="一般机构" :value="0"></el-option>
                                    <el-option label="金融机构" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="行业分类" prop="industryCategory">
                                <el-input size="medium" placeholder="请输入行业分类" v-model="bizForm.industryCategory"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="金融机构地址" prop="address">
                                <el-input size="large" type="textarea" placeholder="请输入金融机构地址"
                                          v-model="bizForm.address"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-col>
                <el-col :span="24" class="warp-breadcrum">
                    <div class="tit-6">
                        认证材料
                    </div>
                </el-col>
                <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="营业执照">
                                <el-upload
                                        class="avatar-uploader"
                                        :headers="headOb"
                                        :action="fileActionUrl"
                                        :show-file-list="false"
                                        :on-success="businessLicenceHandleSuccess"
                                        :before-upload="photoBeforeUpload">
                                    <img v-if="bizForm.businessLicence" :src="bizForm.businessLicence"
                                         class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开户许可证">
                                <el-upload
                                        class="avatar-uploader"
                                        :headers="headOb"
                                        :action="fileActionUrl"
                                        :show-file-list="false"
                                        :on-success="openAcctlicenceHandleSuccess"
                                        :before-upload="photoBeforeUpload">
                                    <img v-if="bizForm.openAcctlicence" :src="bizForm.openAcctlicence"
                                         class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="金融许可证">
                                <el-upload
                                        class="avatar-uploader"
                                        :headers="headOb"
                                        :action="fileActionUrl"
                                        :show-file-list="false"
                                        :on-success="financialBusinessCertHandleSuccess"
                                        :before-upload="photoBeforeUpload">
                                    <img v-if="bizForm.financialBusinessCert" :src="bizForm.financialBusinessCert"
                                         class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="授权代表证明">
                                <el-upload
                                        class="avatar-uploader"
                                        :headers="headOb"
                                        :action="fileActionUrl"
                                        :show-file-list="false"
                                        :on-success="agentCertHandleSuccess"
                                        :before-upload="fileBeforeUpload">

                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-button
                                        size="mini" type="success" v-if="bizForm.agentCert"
                                        @click="downLoadFiles(bizForm.agentCert)">下载
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
            </el-form>
            <el-col :span="24" class="warp-breadcrum">
                <div style="background-color: #FFFFFF">
                    <div class="tit-6">
                        用户管理
                    </div>
                    <div class="tg_test" style="border-top:2px solid #f4f4f5">
                        <div style="margin: 20px 20px 10px 0px">
                            <el-form label-width="120px" :model="accoutForm" class="demo-form-inline">
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="登录工号">
                                            <el-input :disabled="true" style="width: 180px"
                                                             v-model="loginUserForm.loginName"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item :disabled="true" label="手机号码">
                                            <el-input style="width: 180px"
                                                             v-model="loginUserForm.mobile"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-button size="mini" type="primary" @click="resetPassword(loginUserForm.id)">重置密码</el-button>
                                        <el-button size="mini" type="primary" @click="showUserEdit()">用户编辑</el-button>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="24" class="warp-breadcrum">
                <div style="background-color: #FFFFFF">
                    <div class="tit-6">
                        帐户管理
                    </div>
                    <div class="tg_test" style="border-top:2px solid #f4f4f5">
                        <div style="margin: 20px 20px 10px 0px">
                            <el-form label-width="120px" :model="accoutForm" class="demo-form-inline">
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="帐户余额">
                                            <el-input-number :disabled="true" style="width: 180px"
                                                             v-model="accoutForm.balance" :precision="2" :step="100"
                                                             :max="100000000"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="星级帐户">
                                            <el-rate
                                                    :max="3"
                                                    style="margin-top: 5px;"
                                                    v-model="accoutForm.level"
                                                    :disabled = "true"
                                                    show-score
                                                    text-color="#ff9900"
                                                    score-template="{value}">
                                            </el-rate>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-button type="primary" icon="el-icon-plus" size="mini"
                                                   @click="rechargeDialogVisible = true; ;accoutForm.title='帐户充值'">充值
                                        </el-button>
                                        <el-button icon="el-icon-minus" size="mini" @click="rechargeDialogVisible = true;accoutForm.title='帐户冲正'">冲正</el-button>
                                        <el-button icon="el-icon-search" size="mini" @click="goAccountLog()">明细</el-button>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="warp">
            <el-col :span="24" class="warp-breadcrum">
                <div class="dialog-footer">
                    <el-button size="medium" type="default" @click="$router.go(-1)">取消</el-button>
                    <el-button size="medium" type="primary" @click="submitForm('bizForm')">保存</el-button>
                </div>
            </el-col>
        </el-row>
        <!--<account-recharge rechargeDialogVisible="rechargeDialogVisible" />-->
        <el-dialog
                :title="accoutForm.title"
                :visible.sync="rechargeDialogVisible"
                width="30%">
                <el-form label-width="80px" style="margin-left: 20px">
                    <!--<el-form-item label-width="80px" label="帐户名称">-->
                        <!--{{accoutForm.name}}-->
                        <!--&lt;!&ndash;<el-input v-model="accoutForm.name"></el-input>&ndash;&gt;-->
                    <!--</el-form-item>-->
                    <el-form-item label="星级帐户">
                        <el-rate
                                :max="3"
                                style="margin-top: 5px;"
                                v-model="accoutForm.level"
                                :disabled="true"
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                        </el-rate>
                    </el-form-item>
                    <el-form-item v-if="accoutForm.title === '帐户充值'" label-width="80px" label="充值类型">
                        <el-select v-model="accoutForm.type" placeholder="请选择活动区域">
                            <el-option label="客户经理代缴存" :value="0"></el-option>
                            <el-option label="银行转帐" :value="1"></el-option>
                            <el-option label="支付宝" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="80px" :label="accoutForm.title === '帐户充值'?'充值金额':'冲正金额'">
                        <el-input-number style="width: 180px" v-model="accoutForm.ammount" :precision="2" :step="100"
                                         :max="100000000"></el-input-number>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button  @click="rechargeDialogVisible = false">取 消</el-button>
                    <el-button :disabled="rechargeBtnState" type="primary" @click="recharge()">确 定</el-button>
                </span>
        </el-dialog>
        <user-edit v-if="loginUserForm.id" v-on:closeDialog="userEditDialogClose(res)" @setMobile="setMobile" :userId="loginUserForm.id" :dialogVisible="dialogVisible"></user-edit>
    </div>
</template>

<script>
    import bizAPI from '../../api/api_enterprise';
    import tgImg from '@/components/base/TG_IMG'
    import userEdit from '@/components/base/USER_EDIT'
    import accountRecharge from './account_recharge'
    import userAPI from '../../api/api_user'
    import accountAPI from '../../api/api_account'
    import Vue from 'vue'

    export default {
        name: "enterprise_oper",
        components: {tgImg, accountRecharge, userEdit},
        data() {
            return {
                fileActionUrl: this.$proper.backEndUrl + '/file/uploadFile',
                headOb: {'authToken': localStorage.getItem('authToken')},

                //金融机构ID
                enterpriseId: '',

                filters: {
                    enterpriseName: ''
                },
                bizForm: {
                    enterpriseName: '',
                    enterpriseIdNbr: '',
                    id: -1,
                    ownerName: '',
                    ownerIdNbr: '',
                    ownerTel: '',
                    address: '',
                    agentIdNbr: '',
                    agentName: '',
                    agentTel: '',

                    businessLicence: '',
                    openAcctlicence: '',
                    financialBusinessCert: '',
                    agentCert: '',
                    agentCertUrl: '',
                    agentCertName: '',
                    enterpriseType: 0,
                    industryCategory: 1,
                    enterpriseCode: ''

                },
                rechargeDialogVisible: false,
                accoutForm: {
                    title: '帐户充值',
                    level: 0,
                    balance: 0,
                    type: 0,
                    ammount: 0
                },
                loginUserForm: {
                  id: '',
                  loginName: '',
                  mobile: '',
                  dialogVisible: false
                },
                dialogVisible: false,
                rules: {
                    enterpriseName: [
                        {required: true, message: '请输入金融机构名称', trigger: ['blur', 'change']}
                    ],
                    enterpriseIdNbr: [
                        {required: true, message: '请输入统一社会信用代码', trigger: ['blur', 'change']}
                    ],
                    ownerName: [
                        {required: true, message: '请输入法人姓名', trigger: ['blur', 'change']}
                    ],
                    ownerIdNbr: [
                        {required: true, message: '请输入法人身份证号', trigger: ['blur', 'change']}
                    ],
                    ownerTel: [
                        {required: true, message: '请输入法人手机号', trigger: ['blur', 'change']}
                    ],
                    agentName: [
                        {required: true, message: '请输入法人姓名', trigger: ['blur', 'change']}
                    ],
                    agentIdNbr: [
                        {required: true, message: '请输入法人身份证号', trigger: ['blur', 'change']}
                    ],
                    agentTel: [
                        {required: true, message: '请输入法人手机号', trigger: ['blur', 'change']}
                    ],
                    industryCategory: [
                        {required: true, message: '请输入行业分类', trigger: ['blur', 'change']}
                    ],
                    enterpriseType: [
                        {required: true, message: '请选择机构类型', trigger: ['blur', 'change']}
                    ]
                },
                bizDomains: [],
                members: [],
                users: [],
                referrers: [],
                loading: true,
                rechargeBtnState: false

            }
        },
        created() {
            let bizId = this.$route.params.id;
            this.bizForm.id = bizId;
            let _this = this
            if (bizId) {
                bizAPI.getEnterpriseInfos({'id': bizId}).then(res => {

                    //this.bizForm = res.data.enterprise;
                    console.log(1111111111111111111111111);
                    console.log(res);

                    Object.assign(this.bizForm, res.data);
                    Object.assign(this.bizForm, res.data.enterpriseIdentityVO);
                    console.log(this.bizForm);
                    Object.assign(this.accoutForm, res.data.enterpriseIdentityVO.accountVO)
                    Object.assign(this.loginUserForm, res.data.enterpriseIdentityVO.loginUser)
                    this.loading = false;
                })
            } else {
                this.loading = false;
            }

        },
        methods: {
            photoBeforeUpload(file) {
                let type = file.type
                const isJPG = (type.indexOf('image') !== -1)
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isJPG) {
                    this.$message.error('只能上传图片格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!')
                }
                return isJPG && isLt2M
            },
            fileBeforeUpload(file) {
                let type = file.type
                const isJPG = (type.indexOf('image') !== -1)
                const isLt2M = file.size / 1024 / 1024 < 2
                /*if (!isJPG) {
                  this.$message.error('只能上传图片格式!')
                }*/
                if (!isLt2M) {
                    this.$message.error('上传的文件大小不能超过 2MB!')
                }
                //return isJPG && isLt2M
                return isLt2M
            },
            //下载
            downLoadFiles(fileId) {
                console.log(Vue.prototype.$proper.backEndUrl);
                window.location.href = Vue.prototype.$proper.backEndUrl + '/file/downLoadFile?attachId=' + fileId;
            },


            submitForm(formName) {
                let _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        bizAPI.doAddOrUpdate(this.bizForm).then(result => {
                            _this.$message({
                                message: result.message,
                                type: (result.code === '0000') ? 'success' : 'error'
                            });

                            _this.$router.go(-1);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            // 营业执照 添加成功后
            businessLicenceHandleSuccess(res, file) {
                if (res.code === '0000') {
                    this.bizForm.businessLicence = res.data.source
                    //this.updateEnterpriseIdentity('businessLicence', res.data.source);
                    console.error(res.data)
                } else {
                    this.$alert(res.data, '提示')
                }
            },

            // 开户许可证 添加成功后
            openAcctlicenceHandleSuccess(res, file) {
                if (res.code === '0000') {
                    this.bizForm.openAcctlicence = res.data.source
                    //this.updateEnterpriseIdentity('openAcctlicence', res.data.source);
                    console.error(res.data)
                } else {
                    this.$alert(res.data, '提示')
                }
            },

            //金融许可证 添加成功后
            financialBusinessCertHandleSuccess(res, file) {
                if (res.code === '0000') {
                    this.bizForm.financialBusinessCert = res.data.source
                    //this.updateEnterpriseIdentity('financialBusinessCert', res.data.source);
                    console.error(res.data)
                } else {
                    this.$alert(res.data, '提示')
                }
            },

            // 授权代表证明 添加成功后
            agentCertHandleSuccess(res, file) {
                if (res.code === '0000') {
                    this.bizForm.agentCertUrl = URL.createObjectURL(file.raw)
                    this.bizForm.agentCert = res.data.id;
                    this.bizForm.agentCertName = res.data.fileName;
                    //this.updateEnterpriseIdentity('agentCert', this.bizForm.agentCert);
                    console.error(res.data)
                } else {
                    this.$alert(res.data, '提示')
                }
            },
            //
            showUserEdit() {
              this.dialogVisible = true
            },
            userEditDialogClose(value) {
               this.dialogVisible = value
            },
            // 充值
            recharge() {
                this.rechargeBtnState = true
                let _this = this
                let params = {
                    accountId: this.accoutForm.id,
                    ammount: this.accoutForm.ammount,
                    type: this.accoutForm.type
                }
                if(this.accoutForm.title === '帐户充值') {
                  accountAPI.recharge(params).then(res=>{
                    if(res.code === '0000'){
                      _this.$message({
                        message: '充值成功',
                        type: 'success'
                      })
                    }
                    _this.rechargeBtnState = false
                    _this.rechargeDialogVisible = false
                    _this.accoutForm.balance = res.data.balance
                    _this.accoutForm.level = res.data.level
                  })
                } else {
                  if (this.accoutForm.balance < this.accoutForm.ammount){
                    this.$alert('提示', '账本余额不足')
                    _this.rechargeBtnState = false
                  }
                  accountAPI.reversal(params).then(res=>{
                    console.error(res)
                    if(res.code === '0000'){
                      _this.$message({
                        message: '冲正成功',
                        type: 'success'
                      })
                    }
                    _this.rechargeBtnState = false
                    _this.rechargeDialogVisible = false
                    _this.accoutForm.balance = res.data
                  })
                }
                // this.dialogLoading = true
                // alert(111)
                // this.dialogLoading = false
            },
            // 密码重置
            resetPassword(userId) {
                let _this = this
                this.loading = true
                let params = {userId: userId}
                userAPI.resetPassword(params).then(res =>{
                    if(res.code === '0000') {
                        _this.$message({
                            message: '密码重置成功',
                            type: 'success'
                        })
                    }
                    this.loading = false
                })
            },
            // 子组件修改用户信息后，修改该组件等值
            setMobile(mobile) {
              this.loginUserForm.mobile = mobile
            },
            goAccountLog() {
              this.$router.push({path: `/account/accountLog/${this.accoutForm.id}`})
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 40px;
        text-align: center;
    }

    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }

    .avatarList {
        width: 80px;
        height: 80px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        position: relative;
        overflow: hidden;
    }
</style>
